{layout name="common/base" }
<script type="text/html" id="first_leader">
    {{# if(d.puser == null){ }}
    无
    {{# } else { }}
    {{ d.puser.true_name }} / {{d.puser.id}}
    {{# } }}
</script>
<style type="text/css">
    .layui-table-cell {
        height: auto;
    }
    .unpay{
        padding:4px 8px;
        border-radius: 2px;
        color: white;
        background-color: #B42F2D;
    }
    .payed{
        padding:4px 8px;
        border-radius: 2px;
        color: white;
        background-color: #AB956D;
    }
    .delivery{
        padding:4px 8px;
        border-radius: 2px;
        color: white;
        background-color: #00A4F6;
    }
    .done{
        padding:4px 8px;
        border-radius: 2px;
        color: white;
        background-color: #57AB53;
    }
    .close{
        padding:4px 8px;
        border-radius: 2px;
        color: white;
        background-color: #414141;
    }
</style>
<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <div class="layui-form-item">
            <!--<div class="layui-inline">
                <input class="layui-input" name="title" id="title" placeholder="输入商品关键词" autocomplete="off">
            </div>-->
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline" style="width: 220px;">
                    <input type="text" id="order_no" name="order_no" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
</fieldset>
<table class="layui-hide" id="currentTableId" lay-filter="tooFilter"></table>

<script type="text/html" id="orderinfo">
    <div style="font-weight: bold;">订单号: {{ d.order_no }}</div>
    {{# for(var i = 0, len = d.orderitem.length; i < len; i++){ }}
    <div style="width: 430px; height: 60px; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;">
        <div style="width: 50px; height: 50px;"><img src='/upload/{{ d.orderitem[i].image }}'  width='50px' height='50px' /></div>
        <div style="width: 270px;height: 60px;margin-left: 10px;">
            <div style="width: 270px;height: 30px; white-space:pre-wrap;">{{ d.orderitem[i].name }}</div>
            <div style="width: 270px;height: 30px; color: #999999;">规格:{{ d.orderitem[i].props_text }} 单价:{{ d.orderitem[i].price }} 数量:{{ d.orderitem[i].num }}</div>
        </div>
        <!--<div style="width: 170px;height: 60px;margin-left: 10px;">
            <div style="width: 170px;height: 30px; white-space:pre-wrap;">{{ d.orderitem[i].title }}</div>
            <div style="width: 170px;height: 30px; ">规格:{{ d.orderitem[i].sku_names }}</div>
        </div>
        <div style="width: 100px;height: 60px;">
            <div style="width: 100px;height: 30px; white-space:pre-wrap;">￥{{ d.orderitem[i].sell_price }}</div>
            <div style="width: 100px;height: 30px; ">x{{ d.orderitem[i].num }}</div>
        </div>-->
        <div style="width: 100px;height: 60px; text-align: right;">
            <!--退款状态 0正常、1取消订单、2退款中、3退款退单中、4退款、退款退货成功 5拒绝-->
            {{# if(d.orderitem[i].return_status == 2){ }}
            <span class="unpay">商家受理中</span>
            {{# } else if(d.orderitem[i].return_status == 4){ }}
            <span class="unpay">退款完成</span>
            {{# } else if(d.orderitem[i].return_status == 5){ }}
            <span class="unpay">商家拒绝</span>
            {{# } }}

        </div>
    </div>
    {{# } }}
</script>

<script type="text/html" id="userinfo">
    <div>
        <div style="width: 150px;">ID:{{ d.user.id }}</div>
        <div style="width: 150px;">昵称:{{ d.user.nick_name }}</div>
    </div>
</script>

<script type="text/html" id="pay_status">
    {{# if(d.pay_status == 0 && d.order_status != 0){ }}
    <span class="unpay">未支付</span>
    {{# } else{ }}
    <span class="done">已支付</span>
    {{# } }}
</script>

<script type="text/html" id="order_status">
    {{# if(d.order_status == 0 && d.pay_status == 0){ }}
    <span class="unpay">待付款</span>
    {{# } else if((d.order_status == 1) && (d.pay_status == 1) ){ }}
    <span class="payed">待发货</span>
    {{# } else if(d.order_status == 2 && (d.pay_status == 1)&& (d.delivery_status == 1)&& (d.receipt_status == 0)){ }}
    <span class="delivery">已发货</span>
    {{# } else if(d.order_status == 3&& (d.is_comment == 0)){ }}
    <span class="done">待评价</span>
    {{# } else if(d.order_status == 4){ }}
    <span class="done">已完成</span>
    {{# } else if(d.order_status == -1){ }}
    <span class="unpay">商家受理中</span>
    {{# } else if(d.order_status == -2){ }}
    <span class="unpay">退款完成</span>
    {{# } else if(d.order_status == -3){ }}
    <span class="unpay">商家拒绝退款</span>
    {{# } else if(d.order_status == -4){ }}
    <span class="close">取消交易</span>
    {{# } else if(d.order_status == -5){ }}
    <span class="close">交易关闭</span>
    {{# } else{ }}
    {{# } }}
</script>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">订单详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="note">订单备注</a>
    <!-- <a class="layui-btn layui-btn-xs" lay-event="record">订单记录</a> -->
    <!-- <a class="layui-btn layui-btn-xs data-count-edit refunddetail" lay-event="refund">退款详情</a> -->
    {{# if(d.order_status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="todelivery">立即发货</a>
    {{# } else if(d.order_status == 2){ }}
    <!--<a class="layui-btn layui-btn-xs" lay-event="deliveryed">配送信息</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="done">已收货</a>
    {{# } else if(d.order_status == 3){ }}
    {{# } else if(d.order_status == 4){ }}
    {{# } else if(d.order_status == -1){ }}
    {{# } else if(d.order_status == -2){ }}
    {{# } else if(d.order_status == -3){ }}
    {{# } else if(d.order_status == -4){ }}
    {{# } }}
    <!--
       {{# if(d.order_status == 1 || d.order_status == 2 || d.order_status == 3 || d.order_status == 4 || d.order_status == -1){ }}
       <a class="layui-btn layui-btn-xs" lay-event="refund">立即退款</a>
       {{# } }}
    -->
</script>

<script>

    layui.use(['form', 'table', 'util'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            util = layui.util,
            active = {
                reload: function(){
                    var order_no = $('#order_no').val();
                    //执行重载
                    table.reload('tableReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },where: {
                            //key: {
                            //id: demoReload.val()
                            order_no: order_no,
                            //}
                        }
                    });
                }
            };
        table.render({
            id: 'tableReload',
            elem: '#currentTableId',
            url: '/admin/store.Order/lstajax',
            toolbar: '#toolbarHead',
            cols: [[
                {field: 'id', width: 460, title: '商品信息', templet: '#orderinfo'},
                {field: 'user', width: 200, title: '用户信息', templet: '#userinfo'},
                {field: 'pay_price', width: 120, title: '实付金额'},
                {field: 'pay_status', width: 120, title: '支付状态', templet: '#pay_status'},
                {field: 'order_status', width: 120, title: '订单状态', templet: '#order_status'},
                {field: 'create_time', width: 200, title: '下单时间'},
                {title: '操作', minWidth: 250, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            limit: 10,
            page:{
                elem: 'page',
                layout: ['prev', 'page', 'next', 'last','skip'], //自定义分页布局
                groups: 5, //只显示 5 个连续页码
                prev: '上一页',
                next: '下一页',
                first: 0 //不显示首页
            },
            loading:true,
            done: function (res) {
                console.log(res)
            }
        });

        //搜索
        $('.table-search-fieldset .layui-btn').on('click', function(){
            var type = $(this).data('type');
            console.log(type);
            active[type] ? active[type].call(this) : '';
        });
        table.on('tool(tooFilter)', function(obj){
            var data = obj.data;
            console.log(data);
            switch(obj.event){
                case 'detail':
                    var index = layer.open({
                        title: '订单详情',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/admin/store.order/detail/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'note':
                    var index = layer.open({
                        title: '订单备注',
                        type: 2,
                        shade: 0.5,
                        maxmin:true,
                        shadeClose: true,
                        area: ['40%', '40%'],
                        content: '/admin/store.order/note/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'record':
                    var index = layer.open({
                        title: '订单记录',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['45%', '60%'],
                        content: '/admin/store.order_record/lst/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;

                case 'todelivery':
                    var index = layer.open({
                        title: '去发货',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['40%', '40%'],
                        content: '/admin/store.order/todelivery/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'deliveryed':
                    var index = layer.open({
                        title: '配送信息',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['40%', '40%'],
                        content: '/admin/store.order/deliveryed/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'done':
                    layer.confirm('修改后将无法恢复,请谨慎操作！',{icon:3, title:'您确定要修改收货状态吗?'}, function (index) {
                        $.ajax({
                            url: '/admin/store.order/done/id/' + data.id,
                            type: 'GET',
                            success: function(res) {
                                console.log(res)
                                window.location.reload();
                            },
                            error: function(res) {                           }
                        });
                    });
                    break;

                case 'refund':
                    var index = layer.open({
                        title: '退款',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['50%', '60%'],
                        content: '/admin/store.order/refund/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'printer':
                    layer.confirm('确定打印订单吗?',{icon:3, title:'打印订单'}, function (index) {
                        $.ajax({
                            url: '/admin/store.order/printer/id/' + data.id,
                            type: 'GET',
                            success: function(res) {
                                //window.location.reload();
                                if(res.code == 1){
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        obj.del();
                                        layer.close(index);
                                    });
                                }else{
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    });
                                }
                            },
                            error: function(res) {
                                //return   err(res)
                            }
                        });
                    });
                    break;
                case 'delete':
                    layer.confirm('真的删除么?',{icon:3, title:'提示'}, function (index) {
                        $.ajax({
                            url: '/admin/store.order/del/id/' + data.id,
                            type: 'GET',
                            success: function(res) {
                                //window.location.reload();
                                if(res.code == 1){
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        obj.del();
                                        layer.close(index);
                                    });
                                }else{
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    });
                                }
                            },
                            error: function(res) {
                                //return   err(res)
                            }
                        });
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });

    });

    /*查看图片*/
    function showimg(obj) {
        var img_infor = "<img src='" + obj.src + "'  width='800' height='400' />";
        layer.open({
            type: 1,
            closeBtn: 1,
            shade: false,
            title: false, //不显示标题
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: false,
            area:['800px','400px'],
            content: img_infor //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

        });
    }

</script>